<template>
  <div class="login main-container">
    <div class="loginRow">
      <div class="loginContent">
        <h1 class="loginTitle">登录系统</h1>
        <el-input
          v-model="userName"
          placeholder="请输入帐号"
          clearable
          class="mgb20"
        />
        <el-input v-model="userPassword" type="password" placeholder="请输入密码" clearable class="mgb20" />
        <div class="loginCheckbox mgb20">
          <el-checkbox v-model="checked">记住密码</el-checkbox>
          <span>忘记密码</span>
        </div>
        <el-button class="loginBtn mgb20" type="primary" @click="singInClick">登录</el-button>
        <div class="locationnow">没有帐号？立即注册</div>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/login.js'
import { setToken } from '@/utils/auth.js'
export default {
  name: 'Login',
  data() {
    return {
      userName: '',
      userPassword: '',
      checked: true
    }
  },
  methods: {
    singInClick() {
      const uPattern = /^[a-zA-Z0-9_-]{4,16}$/
      if (!(uPattern.test(this.userName))) {
        this.$message.error('帐号为4-16位大小写字母和数字组成')
      } else if (this.userPassword.length < 6) {
        this.$message.error('密码不能小于六位')
      } else {
        var data = {
          userName: this.userName,
          userPassword: this.userPassword
        }
        login(data).then(res => {
          console.log(res)
          if (res.resultCode === '0000') {
            setToken(res.data.token)
            this.$router.push('/')
          }
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .login
    position fixed
    top 0
    left 0
    right 0
    bottom 0
    z-index 999
    background #fff
    .loginRow
      position absolute
      top 50%
      left 50%
      margin -215px 0 0 -190px
      width 380px
      height 400px
      box-shadow 0 0 18px 1px rgba(0,0,0,.2)
      .loginContent
        width 265px
        margin 27px auto
        .loginTitle
          width 100%
          line-height 30px
          font-size 24px
          text-align center
          margin 0 auto
          font-weight 400
          padding-bottom 40px
          color #6f6f6f
        .loginCheckbox
          display flex
          justify-content space-between
        .mgb20
          margin-bottom 20px
        .loginBtn
          width 100%
        .locationnow
          text-align center
          color #409EFF
</style>
